<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 导入Elementplus Css样式 -->
    <link rel="stylesheet" href="../../css/element-plus.css">
    <style>
        .el-aside {
            height: 90vh;
        }
        .el-col-12{
            max-width: 100%;
            flex:1 0 50%;
        }

    </style>
</head>
<div class="main">
    <!-- 面包屑 breadcrumb -->
    =       <div>
    <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/' }">后台数据</el-breadcrumb-item>
        <el-breadcrumb-item>/热度统计</el-breadcrumb-item>
    </el-breadcrumb>
</div>

<div class="tit"><h3>时长统计</h3></div>
<div id="global_duration_statistic" class="tab">
    <table style="border-collapse: collapse; width: 100%;">
        <thead>
        <tr style="background-color: #f2f2f2;">
            <th style="padding: 8px; text-align: left;">时长</th>
            <th style="padding: 8px; text-align: left;">主播数量</th>
            <th style="padding: 8px; text-align: left;">主播占比</th>
            <th style="padding: 8px; text-align: left;">总热度</th>
            <th style="padding: 8px; text-align: left;">平均热度</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td style="padding: 8px; text-align: left;">0~3小时</td>
            <td style="padding: 8px; text-align: left;">28892</td>
            <td style="padding: 8px; text-align: left;">53.78%</td>
            <td style="padding: 8px; text-align: left;">655661570</td>
            <td style="padding: 8px; text-align: left;">22693</td>
        </tr>
        <tr>
            <td style="padding: 8px; text-align: left;">3~6小时</td>
            <td style="padding: 8px; text-align: left;">9358</td>
            <td style="padding: 8px; text-align: left;">17.42%</td>
            <td style="padding: 8px; text-align: left;">710702083</td>
            <td style="padding: 8px; text-align: left;">75945</td>
        </tr>
        <tr>
            <td style="padding: 8px; text-align: left;">6~9小时</td>
            <td style="padding: 8px; text-align: left;">4643</td>
            <td style="padding: 8px; text-align: left;">8.64%</td>
            <td style="padding: 8px; text-align: left;">412778835</td>
            <td style="padding: 8px; text-align: left;">88903</td>
        </tr>
        <tr>
            <td style="padding: 8px; text-align: left;">9~12小时</td>
            <td style="padding: 8px; text-align: left;">2195</td>
            <td style="padding: 8px; text-align: left;">4.09%</td>
            <td style="padding: 8px; text-align: left;">186500171</td>
            <td style="padding: 8px; text-align: left;">84965</td>
        </tr>
        <tr>
            <td style="padding: 8px; text-align: left;">12~15小时</td>
            <td style="padding: 8px; text-align: left;">1045</td>
            <td style="padding: 8px; text-align: left;">1.95%</td>
            <td style="padding: 8px; text-align: left;">90082481</td>
            <td style="padding: 8px; text-align: left;">86203</td>
        </tr>
        <tr>
            <td style="padding: 8px; text-align: left;">15~18小时</td>
            <td style="padding: 8px; text-align: left;">436</td>
            <td style="padding: 8px; text-align: left;">0.81%</td>
            <td style="padding: 8px; text-align: left;">31247590</td>
            <td style="padding: 8px; text-align: left;">71668</td>
        </tr>
        <tr>
            <td style="padding: 8px; text-align: left;">18~21小时</td>
            <td style="padding: 8px; text-align: left;">445</td>
            <td style="padding: 8px; text-align: left;">0.83%</td>
            <td style="padding: 8px; text-align: left;">28215407</td>
            <td style="padding: 8px; text-align: left;">63405</td>
        </tr>
        <tr>
            <td style="padding: 8px; text-align: left;">21~24小时</td>
            <td style="padding: 8px; text-align: left;">6706</td>
            <td style="padding: 8px; text-align: left;">12.48%</td>
            <td style="padding: 8px; text-align: left;">345697741</td>
            <td style="padding: 8px; text-align: left;">51550</td>
        </tr>
        <tr>
            <td style="padding: 8px; text-align: left;">24小时以上</td>
            <td style="padding: 8px; text-align: left;">0</td>
            <td style="padding: 8px; text-align: left;">0.0%</td>
            <td style="padding: 8px; text-align: left;">0</td>
            <td style="padding: 8px; text-align: left;">0</td>
        </tr>
        </tbody>
    </table>
</div>
<div id="app">
    <div style="margin-top: 20px;">
        <el-row>
            <el-col :span="12">
                <el-card style="display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%;">
                    <div id="chart5" style="width: 100%; height: 300px;"></div>
                    <p style="margin-top: 10px;">按时长分段，主播数统计</p>
                </el-card>
            </el-col>
            <el-col :span="12">
                <el-card>
                    <div id="chart6" style="width: 100%; height: 300px;"></div>
                </el-card>
            </el-col>
        </el-row>
    </div>

 </div>

<body>
<!-- 导入vue框架 -->
<script src="../../js/v3.2.8/vue.global.prod.js"></script>
<!-- 导入ElementPlus框架 -->
<script src="../../js/element-plus.js"></script>
<!-- 导入Elementplus Icon  -->
<script src="../../js/element-icons.js"></script>
<!--导入 Echarts-->
<script src="../../js/echarts.min.js"></script>
<script>
            //等待DOM加载完成
            document.addEventListener("DOMContentLoaded",function() {
                const chart5Dom = document.querySelector("#chart5")
                const chart5Option = {

                    title:
                        {
                            text: '主播数百分比'
                        },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow'
                        }
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'category',
                        data: ['0-3小时', '3-6小时', '6-9小时', '9-12小时', '12-15小时', '15-18小时', '18-21小时', '21-24小时','24小时以上']
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [
                        {
                            data: [
                                {
                                    value: 53.78,
                                    itemStyle:
                                        {
                                            color: '#9AFF9A'
                                        }
                                },
                                {
                                    value: 17.42,
                                    itemStyle:
                                        {
                                            color: '#7EC0EE'
                                        }
                                },
                                {
                                    value: 8.64,
                                    itemStyle:
                                        {
                                            color: '#EEE685'
                                        }
                                },
                                {
                                    value: 4.09,
                                    itemStyle:
                                        {
                                            color: '#EE5C42'
                                        }
                                },
                                {
                                    value: 1.95,
                                    itemStyle:
                                        {
                                            color: '#EE82EE'
                                        }
                                },
                                {
                                    value: 0.81,
                                    itemStyle:
                                        {
                                            color: '#E0FFFF'
                                        }
                                },
                                {
                                    value: 0.83,
                                    itemStyle:
                                        {
                                            color: '#EE00EE'
                                        }
                                },
                                {
                                    value: 12.48,
                                    itemStyle:
                                        {
                                            color: '#87CEFF'
                                        }
                                },
                                {
                                    value: 0,
                                    itemStyle:
                                        {
                                            color: '#87CEFF'
                                        }
                                },

                            ],
                            type: 'bar'
                        }
                    ]
                };

                initEcharts(chart5Dom, chart5Option);



                const chart6Dom = document.querySelector("#chart6")
                        const chart6Option =
                            {
                                tooltip: {
                                    trigger: 'item'
                                },
                                legend: {
                                    top: '5%',
                                    left: 'center'
                                },
                                series: [
                                    {
                                        name: '按热度分段，总热度统计',
                                        type: 'pie',
                                        radius: ['40%', '70%'],
                                        avoidLabelOverlap: false,
                                        label: {
                                            show: false,
                                            position: 'center'
                                        },
                                        emphasis: {
                                            label: {
                                                show: true,
                                                fontSize: 40,
                                                fontWeight: 'bold'
                                            }
                                        },
                                        labelLine: {
                                            show: false
                                        },
                                        data:
                                            [
                                            {value: 180, name: '100W-50W'},
                                            {value: 140, name: '100W以上'},
                                            {value: 880, name: '50W-10W'},
                                            {value: 1750, name: '10W-1W'},
                                            ]

                                    }
                                    ]
                            };


                    initEcharts(chart6Dom, chart6Option);

            })


            function initEcharts(dom, option)
            {
                //初始化实例
                const domEcharts = echarts.init(dom);
                //设置echarts 实例
                domEcharts.setOption(option);

            }
            const {
                createApp,
                reactive,
                ref
            } = Vue;

            // 应用使用element plus 组件
            app.use(ElementPlus);
            // "location" 参数对应<location>
            app.component("location" , ElementPlusIconsVue.Location)
            app.component("document" , ElementPlusIconsVue.Document)
            app.component("icon-menu" , ElementPlusIconsVue.Menu)
            app.component("setting" , ElementPlusIconsVue.Setting)

            //将应用挂载到 #app
            app.mount('#app');
    </script>

    </body>
</div>
</html>